<template>
  <div class="v-mfr-mgt">
    <c-row-search>
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <el-form-item prop="keywordSearch">
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="search"
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
          <el-button @click="reset">
            {{ multLang('btn_rst_a') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <c-popover-form>
            <el-form :model="popForm" ref="popForm" label-width="128px">
              <c-row :col="6">
                <c-col>
                  <el-form-item
                    :label="multLang('title_category_a', ':')"
                    prop="orgTypeSearch"
                  >
                    <c-select
                      v-model="popForm.orgTypeSearch"
                      :options="orgTypeList"
                      clearable
                      :placeholder="multLang('title_m')"
                    >
                    </c-select>
                  </el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_mp', ':')"
                    prop="isUseSearch"
                  >
                    <c-select
                      v-model="popForm.isUseSearch"
                      :options="isEnableList"
                      clearable
                      :placeholder="multLang('title_m')"
                    >
                    </c-select>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-popover-form>
        </el-form-item>
      </el-form>
      <template #right>
        <el-button
          v-if="auth.isAdd"
          type="primary"
          @click="$router.push({ name: Routes.MfrAdd })"
        >
          <c-icon name="plus"></c-icon>

          {{ multLang('btn_new_a') }}
        </el-button>
        <c-select-more
          @command="moreActions"
          v-if="
            auth.isExport || auth.isBRExport || auth.isImport || auth.isDelete
          "
        >
          <el-button type="primary">
            {{ multLang('btn_more_a') }}
            <c-icon name="down"></c-icon>
          </el-button>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-if="auth.isExport" command="exportSelect">
              {{ multLang('btn_export_a') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isExport" command="exportAll">
              {{ multLang('btn_export_b') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isBRExport" command="exportQRCode">
              {{ multLang('btn_export_a', 'title_qr_a') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isBRExport" command="exportQRCodeAll">
              {{ multLang('btn_export_b', 'title_qr_a') }}
            </el-dropdown-item>

            <el-dropdown-item v-if="auth.isImport" command="inport">
              {{ multLang('btn_import_b', 'title_b_o') }}
            </el-dropdown-item>

            <!-- <el-dropdown-item v-if="auth.isDelete" command="batchDel">
              {{ multLang('text_ap') }}
            </el-dropdown-item> -->
          </el-dropdown-menu>
        </c-select-more>
      </template>
    </c-row-search>
    <c-table-page
      class="v-mfr-table"
      :data="table.data"
      :col="col"
      :vol="table.vol"
      select
      @select-change="selectChange"
      :page.sync="page.current"
      :size.sync="page.size"
      :total="page.total"
      @page-change="pageChange"
      @switch-change="switchChange"
    >
      <template #opn="{ row }" v-if="auth.isEdit || auth.isDelete">
        <el-button v-if="auth.isEdit" type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>
        <el-button v-if="auth.isDelete" type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
      <!-- <template v-if="true" #opn>
        <el-table-column width="200px" fixed="right" align="center">
          <template slot="header" slot-scope="{}">
            {{ multLang('title_action_a') }}
          </template>
          <div slot-scope="{ row }" style="text-align: center;">
            <el-button v-if="auth.isEdit" type="text" @click="edit(row)">
              <c-icon name="edit"></c-icon>
              <span>
                {{ multLang('btn_edit_a') }}
              </span>
            </el-button>

            <el-button v-if="auth.isDelete" type="text" @click="del(row)">
              <c-icon name="delete"></c-icon>
              <span>
                {{ multLang('btn_delete_a') }}
              </span>
            </el-button>
          </div>
        </el-table-column>
      </template> -->
    </c-table-page>
  </div>
</template>
<script>
import { Routes } from '@vue/router/routes'
import { delMfrData, editMfrStatus, getMfrAuth, getMfrData } from '@api/mfr'
import { toRoute } from '@/util/router'
import { ObjectCopy } from '@/util'
export default {
  name: 'VMfrMgt',
  components: {},
  props: {},
  data() {
    return {
      Routes,
      form: { keywordSearch: '' },
      popForm: {
        orgTypeSearch: '',
        isUseSearch: ''
      },
      auth: {
        isAdd: false,
        isDelete: false,
        isEdit: false,
        isDetail: false,
        isImport: false,
        isExport: false,

        isDoc: false,
        isContact: false
      },
      table: {
        select: '',
        click: {},
        data: [],
        vol: [
          { key: 'title_pr', val: true },
          { key: 'title_name_m', val: true },
          { key: 'title_pv', val: false },
          { key: 'title_category_ah', val: true },
          { key: 'title_bab_g', val: true },
          { key: 'title_aal_n', val: true },
          { key: 'title_pw', val: false }
        ]
      },
      page: {
        current: 1,
        size: 20,
        total: 0
      }
    }
  },
  computed: {
    isEnableList() {
      return this.optionList('is_enable')
    },
    orgTypeList() {
      return this.optionList('org_type')
    },
    orgTypeMap() {
      return this.optionMap('org_type')
    },
    allFacilitiesMap() {
      return this.optionMap('all_facilities')
    },
    col() {
      return [
        {
          label: 'title_pr',
          prop: 'inner_code',
          route: {
            name: Routes.MfrView,
            auth: this.auth.isDetail,
            params: {
              auth: this.auth
            }
          }
        },
        {
          label: 'title_name_m',
          prop: 'title'
        },
        {
          label: 'title_pv',
          prop: 'short_title'
        },
        {
          label: 'title_category_ah',
          prop: 'org_type_id',
          formatter: row => this.orgTypeMap[row.org_type_id]
        },
        {
          label: 'title_bab_g',
          prop: 'address'
        },
        {
          label: 'title_aal_n',
          prop: 'is_use',
          switch: {
            auth: true,
            list: this.isEnableList
          }
        },
        {
          label: 'title_pw',
          prop: 'parent_id',
          formatter: row => this.allFacilitiesMap[row.parent_id]
        }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'is_enable' })
    this.setOption({ key: 'org_type' })
    getMfrAuth().then(({ data }) => {
      if (data) {
        ObjectCopy(this.auth, data.org_customer)
        if (data.org_customer_attach_tag) this.auth.isDoc = true
        if (data.org_customer_contact_tag) this.auth.isContact = true
      }
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
    this.setOption({ key: 'all_facilities' })
  },
  deactivated() {
    const { close } = this.$route.params
    close && this.reset()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.page.current = 1
      this.query()
    },
    reset() {
      this.$refs.popForm.resetFields()
    },

    query() {
      getMfrData({
        pageNumber: this.page.current,
        pageSize: this.page.size,
        ...this.form,
        ...this.popForm
      }).then(({ data }) => {
        if (data) {
          this.table.data = data.rows || []
          this.page.total = data.total || 0
        }
      })
    },

    exportSelect() {},
    exportAll() {},
    exportQRCode() {},
    exportQRCodeAll() {},
    inport() {},
    batchDel() {
      const ids = this.table.select
      ids && this.delMfrData(ids)
    },
    moreActions(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    edit(row) {
      const { id } = row || {}
      toRoute(Routes.MfrView, {
        params: { id, edit: true, auth: this.auth }
      })
    },
    del(row) {
      const { id } = row
      id && this.delMfrData(id)
    },
    delMfrData(id) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_b_o']),
        this.multLang('btn_delete_a', 'title_b_o'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        id &&
          delMfrData({
            id
          }).then(() => {
            this.query()
          })
      })
    },
    selectChange(ids) {
      this.table.select = ids
    },
    pageChange() {
      this.query()
    },
    switchChange({ val: is_use, valBack }, row) {
      const { id } = row || {}
      editMfrStatus({ id, is_use })
        .then(({ code }) => {
          if (code === 200) {
            this.query()
          } else {
            valBack()
          }
        })
        .catch(() => {
          valBack()
        })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .v-mfr {
    &-mgt {
    }
    &-table {
      height: calc(100% - 66px);
      overflow: hidden;
    }
  }
}
</style>
